<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
 
    <h:outputStylesheet>
        a.no-decor>img {
        border: none;
        }
    </h:outputStylesheet>
    <a4j:status onstart="#{rich:component('statPane')}.show()" onstop="#{rich:component('statPane')}.hide()" />
    <h:form id="form">
        <rich:dataTable value="#{carsBean.allInventoryItems}" var="car" iterationStatusVar="it" id="table" rows="15">
            <rich:column>
                <f:facet name="header">#</f:facet>
                #{it.index}
            </rich:column>
            <rich:column>
                <f:facet name="header">Vendor</f:facet>
                <h:outputText value="#{car.vendor}" />
            </rich:column>
            <rich:column>
                <f:facet name="header">Model</f:facet>
                <h:outputText value="#{car.model}" />
            </rich:column>
            <rich:column>
                <f:facet name="header">Price</f:facet>
                <h:outputText value="#{car.price}" />
            </rich:column>
            <rich:column>
                <f:facet name="header">Mileage</f:facet>
                <h:outputText value="#{car.mileage}" />
            </rich:column>
            <rich:column>
                <f:facet name="header">VIN</f:facet>
                <h:outputText value="#{car.vin}" />
            </rich:column>
            <rich:column>
                <a4j:commandLink styleClass="no-decor" execute="@this" render="@none"
                    oncomplete="#{rich:component('confirmPane')}.show()">
                    <h:graphicImage value="/images/iconos/delete.gif" alt="delete" />
                    <a4j:param value="#{it.index}" assignTo="#{carsBean.currentCarIndex}" />
                </a4j:commandLink>
                <a4j:commandLink styleClass="no-decor" render="editGrid" execute="@this"
                    oncomplete="#{rich:component('editPane')}.show()">
                    <h:graphicImage value="/images/iconos/edit.gif" alt="edit" />
                    <a4j:param value="#{it.index}" assignTo="#{carsBean.currentCarIndex}" />
                    <f:setPropertyActionListener target="#{carsBean.editedCar}" value="#{car}" />
                </a4j:commandLink>
            </rich:column>
            <f:facet name="footer">
                <rich:dataScroller page="#{carsBean.page}" />
            </f:facet>
        </rich:dataTable>
 
        <a4j:jsFunction name="remove" action="#{carsBean.remove}" render="table" execute="@this"
            oncomplete="#{rich:component('confirmPane')}.hide();" />
 
        <rich:popupPanel id="statPane" autosized="true">
            <h:graphicImage value="/images/ai.gif" alt="ai" />
            Please wait...
        </rich:popupPanel>
 
        <rich:popupPanel id="confirmPane" autosized="true">
            Are you sure you want to delete the row?
            <a4j:commandButton value="Cancel" onclick="#{rich:component('confirmPane')}.hide(); return false;" />
            <a4j:commandButton value="Delete" onclick="remove(); return false;" />
        </rich:popupPanel>
 
        <rich:popupPanel header="Edit Car Details" id="editPane" domElementAttachment="parent" width="400" height="170">
            <h:panelGrid columns="3" id="editGrid">
                <h:outputText value="Vendor" />
                <h:outputText value="#{carsBean.editedCar.vendor}" />
                <h:panelGroup />
                <h:outputText value="Model" />
                <h:outputText value="#{carsBean.editedCar.model}" />
                <h:panelGroup />
                <h:outputText value="Price" />
                <h:inputText value="#{carsBean.editedCar.price}" required="true" requiredMessage="Price is required" id="price"
                    converterMessage="Should be a valid price" validatorMessage="Should be a valid price" label="Price field">
                    <f:validateDoubleRange minimum="0.00" maximum="99999999"/>
                </h:inputText>
                <rich:message id="priceMsg" for="price" />
                <h:outputText value="Mileage" />
                <h:inputText value="#{carsBean.editedCar.mileage}" id="mage" converterMessage="Should be a valid mileage"
                    validatorMessage="Should be a valid mileage" label="Mileage field">
                    <f:validateDoubleRange minimum="0.00" maximum="99999999.00" />
                </h:inputText>
                <rich:message id="madeMsg" for="mage" />
                <h:outputText value="VIN" />
                <h:inputText value="#{carsBean.editedCar.vin}" id="vin" required="true"
                    validatorMessage="Not a valid 17-digit VIN" converterMessage="Not a valid 17-digit VIN"
                    requiredMessage="VIN is required">
                    <f:validateLength minimum="17" maximum="17" />
                </h:inputText>
                <rich:message id="vinMsg" for="vin" />
            </h:panelGrid>
            <a4j:commandButton value="Store" action="#{carsBean.store}" render="table" execute="editPane"
                oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />
            <a4j:commandButton value="Cancel" onclick="#{rich:component('editPane')}.hide(); return false;" />
        </rich:popupPanel>
    </h:form>
</ui:composition>